<template>
  <div>
    <v-row>
      <v-col cols="4">
        <v-text-field dense label="请输入订单号" outlined v-model="searchForm.orderId"></v-text-field>
      </v-col>
      <v-col cols="4">
        <v-text-field dense label="请输入支付编号" outlined v-model="searchForm.pageNo"></v-text-field>
      </v-col>
      <v-col cols="2">
        <v-btn color="primary" @click="getOrderList">搜索</v-btn>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <v-simple-table>
          <thead>
          <tr>
            <th>订单号</th>
            <th>支付编号</th>
            <th>总金额</th>
            <th>订单状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="order in orderList" :key="order.id">
            <td>{{order.id}}</td>
            <td>{{order.payNo}}</td>
            <td>{{order.totalPrice/100}}</td>
            <td>
              <div v-if="order.status==0"><v-chip label outlined color="primary" small>未支付</v-chip> </div>
              <div v-else-if="order.status==1"><v-chip label outlined color="success" small>已支付</v-chip> </div>
              <div v-else-if="order.status==2"><v-chip label outlined color="error" small>退订中</v-chip> </div>
              <div v-else-if="order.status==3"><v-chip label outlined color="error" small>已退订</v-chip> </div>
            </td>
            <td>
              <v-btn color="primary" text @click="openOrderDetails(order)">详情</v-btn>
            </td>
          </tr>
          </tbody>
        </v-simple-table>
      </v-col>
      <v-col cols="12">
        <v-pagination v-model="pageNum" :length="totalPage" class="my-4"></v-pagination>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import {selectOrderListByCurrentUser} from "../../http/api/order";

export default {
  name: "Index",
  data:()=>({
    pageNum:1,
    pageSize:10,
    orderList:[],
    totalPage:0,
    searchForm:{
      orderId:null,
      pageNo:null,
    }
  }),
  created() {
    this.init()
  },
  methods:{
    init(){
      this.getOrderList()
    },
    getOrderList(){
      selectOrderListByCurrentUser(this.searchForm.orderId,this.searchForm.pageNo,this.pageNum,this.pageSize).then(res=>{
        this.orderList = res.data.list
        this.totalPage = res.data.pages
      })
    },
    openOrderDetails(order){
      this.$router.push({
        path:'/order/orderDetails',
        query:{
          orderId : order.id
        }
      })
    }
  }
}
</script>

<style scoped>

</style>